<template>
  <div
    class="v-loading_mask"
    @click="handleMaskEvent"
    ref="vLoadingMaskRef"
    :style="{
      display: visible,
    }"
  >
    <slot>
      <svg
        class="svg-loading"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M512 42.666667c-25.6 0-42.666667 17.066667-42.666667 42.666666v170.666667c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V85.333333c0-25.6-17.066667-42.666667-42.666667-42.666666z m0 682.666666c-25.6 0-42.666667 17.066667-42.666667 42.666667v170.666667c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666667-42.666666v-170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667zM238.933333 179.2c-17.066667-17.066667-42.666667-12.8-59.733333 4.266667-17.066667 17.066667-17.066667 42.666667 0 59.733333L298.666667 362.666667c17.066667 17.066667 42.666667 17.066667 59.733333 4.266666 17.066667-17.066667 17.066667-42.666667 4.266667-59.733333l-4.266667-4.266667-119.466667-123.733333zM725.333333 661.333333c-17.066667-17.066667-42.666667-12.8-59.733333 4.266667-17.066667 17.066667-17.066667 42.666667 0 59.733333l119.466667 119.466667c17.066667 17.066667 42.666667 17.066667 59.733333 4.266667s17.066667-42.666667 4.266667-59.733334l-4.266667-4.266666-119.466667-123.733334zM298.666667 512c0-25.6-17.066667-42.666667-42.666667-42.666667H85.333333c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666667h170.666667c25.6 0 42.666667-17.066667 42.666667-42.666667z m640-42.666667h-170.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h170.666667c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666667zM302.933333 661.333333l-119.466666 119.466667c-17.066667 17.066667-17.066667 42.666667-4.266667 59.733333s42.666667 17.066667 59.733333 4.266667l4.266667-4.266667 119.466667-119.466666c17.066667-17.066667 17.066667-42.666667 4.266666-59.733334s-46.933333-17.066667-64 0z m388.266667-285.866666c12.8 0 21.333333-4.266667 29.866667-12.8l119.466666-119.466667c17.066667-17.066667 17.066667-42.666667 4.266667-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333-4.266667l-4.266667 4.266667-119.466667 119.466666c-17.066667 17.066667-17.066667 42.666667 0 59.733334 8.533333 8.533333 21.333333 12.8 29.866667 12.8z"
          p-id="4300"
          fill="#1296db"
        ></path>
      </svg>
    </slot>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

const handleMaskEvent = (event: MouseEvent) => {
  event.stopPropagation();
};

const vLoadingMaskRef = ref<HTMLElement>();

const visible = computed(() => {
  if (!vLoadingMaskRef.value) return "none";

  return window.getComputedStyle(vLoadingMaskRef.value.parentElement!).display;
});
</script>

<style>
.v-loading_mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: inherit;
  justify-content: center;
  align-items: center;
}
.v-loading_mask .svg-loading {
  max-width: 5rem;
  max-height: 5rem;
  height: 50%;
  animation: rotationAnimation 3s linear 0s infinite;
}
@keyframes rotationAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.v-loading_container {
  animation: opacityAnimation 0.3s ease 0s 1;
}
@keyframes opacityAnimation {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
</style>
